<template>
  <div class="books">
    <van-nav-bar title="我的图书" left-arrow @click-left="goBack" />
    
    <van-search
      v-model="searchText"
      placeholder="请输入图书名称"
      @search="onSearch"
    />
    
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell
          v-for="book in bookList"
          :key="book.id"
          :right-width="65"
          :left-width="65"
        >
          <template #left>
            <van-button square type="primary" text="编辑" @click="editBook(book)" />
          </template>
          
          <van-cell
            :title="book.title"
            :label="book.author"
            is-link
            @click="goToBookDetail(book.id)"
          >
            <template #default>
              <van-tag plain type="primary">{{ book.category }}</van-tag>
            </template>
          </van-cell>
          
          <template #right>
            <van-button square type="danger" text="删除" @click="deleteBook(book)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast, Dialog } from 'vant'

export default {
  name: 'Books',
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    const activeTab = ref(1)
    
    // 模拟图书数据
    const bookList = ref([
      { id: 1, title: 'Vue.js设计与实现', author: '霍春阳', category: '技术' },
      { id: 2, title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', category: '技术' },
      { id: 3, title: '重构：改善既有代码的设计', author: 'Martin Fowler', category: '技术' },
      { id: 4, title: '代码大全', author: 'Steve McConnell', category: '技术' },
      { id: 5, title: '人月神话', author: 'Frederick P. Brooks', category: '技术' }
    ])
    
    const goBack = () => {
      router.go(-1)
    }
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const goToBookDetail = (id) => {
      router.push(`/book/${id}`)
    }
    
    const onSearch = () => {
      // 执行搜索
      Toast('搜索: ' + searchText.value)
    }
    
    const onRefresh = () => {
      // 模拟刷新数据
      setTimeout(() => {
        refreshing.value = false
        Toast('刷新成功')
      }, 1000)
    }
    
    const onLoad = () => {
      // 模拟加载更多数据
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
    
    const editBook = (book) => {
      Toast('编辑图书: ' + book.title)
    }
    
    const deleteBook = (book) => {
      Dialog.confirm({
        title: '确认删除',
        message: `确定要删除《${book.title}》吗？`
      }).then(() => {
        // 执行删除操作
        const index = bookList.value.findIndex(b => b.id === book.id)
        if (index !== -1) {
          bookList.value.splice(index, 1)
          Toast.success('删除成功')
        }
      }).catch(() => {
        // 取消删除
      })
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      searchText,
      loading,
      finished,
      refreshing,
      activeTab,
      bookList,
      goBack,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      goToBookDetail,
      onSearch,
      onRefresh,
      onLoad,
      editBook,
      deleteBook,
      onChangeTab
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>